<template>
  <div class="mccard-main s1" :class="{'s1-s2':0}">
    <div class="class-name" v-cloak>{{classInfo.grade_name+classInfo.class_name}}</div>
    <div class="class-mottos">
      <div class="teacher" v-cloak>
        <!--<div class="t-big-name">{{teacherInfo.teacher_name}}</div>-->
        <div class="t-ava" :class={default:!teacherInfo.avatar_url}>
          <div class="bder">
            <div class="mid">
              <img
                :src="(teacherInfo.avatar_url&&('../'+teacherInfo.avatar_url))||'/Areas/Mccard/Content/css/imgs/avatar.png'"/>
            </div>
          </div>
        </div>
        <div class="t-name">{{teacherInfo.teacher_name}}</div>
        <div class="t-title" ref="eTeacherInfo">
          <p></p>
        </div>
      </div>
      <div class="catchphrase" v-cloak ref="eCatchphrase"><div class="catchphrase-txt">{{catchphrase.description}}</div></div>
      <div class="mottos" ref="eMottos"><p>{{classMotto.description}}</p></div>
      <div class="praise-abuse" v-if="0">
        <table>
          <tr>
            <td>
              <div class="name">司徒盎然</div>
            </td>
            <td>
              <div class="behavior">上课时交头接耳</div>
            </td>
            <td>
              <div class="score wrong">-20</div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="show-frame">
      <div class="win" ref="ePictureShow">
        <template v-if="classStyle[0]">
          <video ref="video" v-if="classStyle[0].file_type==2" :src="classStyle[0].url" loop="loop"
                 autoplay="autoplay"></video>
          <PictureShow v-else :list="classStyle"></PictureShow>
          <!--<ul v-else>
            <li :class="[i?'hide':'']" v-for="(item,i) in classStyle">
              <img :src="item.url" width="932" height="547">
            </li>
          </ul>-->
        </template>
      </div>

    </div>
    <div class="b-bg"></div>
  </div>
</template>

<script>
  import axios from 'axios'
  import TextMarquee from '@/modules/marquee-text/text-marquee'
  import PictureShow from './PictureShow'

  export default {
    name: 'temp1index',
    props: ['bus'],
    data () {
      return {
        classInfo: {
          'class_id': '',
          'grade_name': '',
          'class_name': ''
        },
        teacherInfo: {
          'teacher_name': '',
          'introduction': '',
          'avatar_url': ''
        },

        // 1
        classMotto: {
          description: ''
        },

        // 2
        catchphrase: {
          description: ''
        },

        // 3
        classStyle: [],
        // 4
        behaviour: []
      }
    },
    mounted () {
      let {eCatchphrase, eMottos, eTeacherInfo} = this.$refs
      this.textMarqueeCatchphrase = new TextMarquee({
        eBox: eCatchphrase,
        eText: eCatchphrase.children[0],
        perSecMove: 10
      })
      this.textMarqueeMottos = new TextMarquee({
        eBox: eMottos,
        eText: eMottos.children[0],
        perSecMove: 10
      })
      this.textMarqueeTeacherInfo = new TextMarquee({
        eBox: eTeacherInfo,
        eText: eTeacherInfo.children[0],
        perSecMove: 10
      })
      this.update()
    },
    beforeRouteUpdate (to, from, next) {
      next()
      this.update()
    },
    methods: {
      update () {
        let {equipmentCode} = this.bus
        if (!equipmentCode) return

        this.classStyle = []

        // 获取设备关联的班级信息
        this.getClassInfo().then(d => {
          this.classInfo = d.data

          // 获取模式1内容信息
          axios.get('/Mccard/Ajax/GetContentList?gradeid=' + d.data.grade_id + '&classid=' + d.data.class_id + '&templateid=1').then(({data: d}) => {
            d.data && d.data.forEach(n => {
              switch (n.modular_id) {
                case '1':
                  this.classMotto = n
                  break
                case '2':
                  this.catchphrase = n
                  break
                case '3':
                  if (n.file_type === 2) {
                    this.classStyle = [n]
                  }

                  if (!this.classStyle.length || this.classStyle[0].file_type !== 2) {
                    this.classStyle.push(n)
                  }
                  break
              }
            })

            this.$nextTick(function () {
              // 有视频情况
              if (this.$refs.video) {
                window.videoPlay = function () {
                  this.$refs.video.play()
                }

                window.jselectronic && window.jselectronic.videoPlay()
              }

              // 班训 警句 滚动
              this.textMarqueeCatchphrase.downUpdate(this.catchphrase.description)
              this.textMarqueeMottos.downUpdate(this.classMotto.description)
            })
          })
        })

        // 获取设备关联的老师基础信息
        axios.get('/Mccard/Ajax/GetTeacherInfoByEquipmentCode?equipmentCode=' + equipmentCode).then(({data: d}) => {
          if (d.data) {
            this.teacherInfo = d.data

            this.$nextTick(function () {
              this.textMarqueeTeacherInfo.downUpdate(this.teacherInfo.introduction)
            })
          }
        })
      },
      getClassInfo () {
        let {equipmentCode} = this.bus
        return axios.get('/Mccard/Ajax/GetClassInfoByEquipmentCode?equipmentCode=' + equipmentCode).then(({data: d}) => {
          return d
        })
      }
    },
    destroyed () {
      this.textMarqueeCatchphrase.destroy()
      this.textMarqueeMottos.destroy()
      this.textMarqueeTeacherInfo.destroy()
    },
    components: {
      PictureShow
    }
  }
</script>

<style>
  .mccard-main.s1 {
    height: 1920px;
    overflow: hidden;
    background: #0cf url("../imgs/bg1.png") no-repeat;
    background-size: 100% auto;
  }

  .mccard-main.s1 .class-name {
    font-family: '\534E\5EB7\6D77\62A5\4F53W12\28P\29';
    -webkit-text-stroke-width: 0.2px;
    font-size: 80px;
    text-align: center;
    color: #fff;
    margin-top: 204px;
    height: 96px;
  }

  .mccard-main.s1 .class-name[v-cloak] {
    color: rgba(255, 255, 255, 0);
    overflow: hidden;
  }

  .mccard-main.s1 .class-mottos {
    width: 1022px;
    height: 590px;
    background: url("../imgs/intro1.png") no-repeat;
    background-size: 100% auto;
    margin: 108px auto 0;
    position: relative;
  }

  .mccard-main.s1 .class-mottos .teacher {
    font-family: '\65B9\6B63\827A\9ED1\7B80\4F53';
    -webkit-text-stroke-width: 0.2px;
    position: absolute;
    width: 397px;
  }

  .mccard-main.s1 .class-mottos .teacher .t-big-name {
    font-size: 28px;
    color: #cd561b;
    padding: 52px 0 0;
    text-align: center;
    height: 33px;
  }

  .mccard-main.s1 .class-mottos .teacher .t-ava {
    border: 8px solid #edd67d;
    margin: 64px auto 0;
    border-radius: 50%;
    width: 123px;
    height: 123px;
    box-shadow: 0 4px 3px 0px rgba(0, 0, 0, 0.4);
  }

  .mccard-main.s1 .class-mottos .teacher .t-ava .bder {
    width: 115px;
    height: 115px;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #e7b63f;
  }

  .mccard-main.s1 .class-mottos .teacher .t-ava .mid {
    width: 115px;
    height: 115px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .mccard-main.s1 .class-mottos .teacher .t-ava img {
    width: 115px;
  }

  .mccard-main.s1 .class-mottos .teacher .t-ava.default img {
    width: 80px;
  }

  .mccard-main.s1 .class-mottos .teacher .t-name {
    padding-top: 26px;
  }

  .mccard-main.s1 .class-mottos .teacher .t-name, .mccard-main.s1 .class-mottos .teacher .t-title {
    font-size: 28px;
    color: #cd561b;
    padding-left: 28px;
    padding-right: 28px;
    text-align: justify;
  }

  .mccard-main.s1 .class-mottos .teacher .t-title {
    height: 276px;
    overflow: hidden;
  }

  .mccard-main.s1 .class-mottos .mottos {
    font-family: '\65B9\6B63\827A\9ED1\7B80\4F53';
    -webkit-text-stroke-width: 0.2px;
    font-size: 28px;
    color: #cd561b;
    width: 446px;
    text-align: justify;
    position: absolute;
    left: 496px;
    top: 78px;
    height: 66px;
    overflow: hidden;
  }

  .mccard-main.s1 .class-mottos .catchphrase {
    font-family: '\65B9\6B63\827A\9ED1\7B80\4F53';
    -webkit-text-stroke-width: 0.2px;
    font-size: 28px;
    color: #737373;
    width: 492px;
    position: absolute;
    top: 278px;
    left: 488px;
    text-align: justify;
    height: 232px;
    overflow: hidden;
  }

  .mccard-main.s1 .class-mottos .catchphrase .bt {
    text-align: right;
    padding-top: 40px;
  }

  .mccard-main.s1 .class-mottos .praise-abuse {
    display: none;
  }

  .mccard-main.s1 .show-frame {
    width: 1062px;
    height: 715px;
    clear: both;
    position: relative;
    margin: 20px auto 0;
  }

  .mccard-main.s1 .show-frame:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../imgs/frame1.png");
    background-size: 100% auto;
  }

  .mccard-main.s1 .show-frame .win {
    width: 932px;
    height: 547px;
    overflow: hidden;
    position: absolute;
    left: 66px;
    top: 101px;
    -webkit-perspective-origin: 10% 10%;
  }

  .mccard-main.s1 .show-frame video {
    width: 100%;
    height: 100%;
  }

  .mccard-main.s1 .show-frame ul {
    transition: transform .5s ease;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
  }

  .mccard-main.s1 .show-frame li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .mccard-main.s1 .show-frame li.hide {
    transform: translate3d(0, 0, -10px);
  }

  .mccard-main.s1 .show-frame li.prev {
    transform: translate3d(0, 0, -1px);
  }

  @keyframes rollOut {
    0% {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translate3d(100%, 0, 0) rotate(120deg);
    }
  }

  .mccard-main.s1 .show-frame .rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
  }

  .mccard-main.s1 .show-frame .animated {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .mccard-main.s1 .b-bg {
    background: url("../imgs/b-bg1.png") no-repeat;
    background-size: 100% auto;
    width: 1080px;
    height: 394px;
    position: absolute;
    bottom: 0;
  }

  .mccard-main.s1.s1-s2 .class-mottos {
    background-image: url("../imgs/intro2.png");
    background-size: 100% auto;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher {
    font-family: '\65B9\6B63\827A\9ED1\7B80\4F53';
    -webkit-text-stroke-width: 0.2px;
    width: 386px;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher[v-cloak] {
    display: none;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-big-name {
    display: none;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-ava {
    width: 72px;
    height: 72px;
    margin: 38px auto 0;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-ava .mid {
    width: 72px;
    height: 72px;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-ava img {
    width: 72px;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-ava.default img {
    width: 50px;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-name,
  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-title {
    font-size: 24px;
    color: #cd561b;
    line-height: 1.1;
    padding: 0 42px 0 44px;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-name {
    padding-top: 20px;
    padding-bottom: 4px;
    color: #8e3509;
  }

  .mccard-main.s1.s1-s2 .class-mottos .teacher .t-title {
    height: 132px;
    overflow: hidden;
  }

  .mccard-main.s1.s1-s2 .class-mottos .mottos {
    top: 66px;
    height: 100px;
  }

  .mccard-main.s1.s1-s2 .class-mottos .catchphrase {
    font-size: 26px;
    margin: 106px 0 0 52px;
    width: 308px;
    line-height: 1.2;
    top: 278px;
    left: 8px;
    height: 156px;
  }

  .mccard-main.s1.s1-s2 .class-mottos .catchphrase .bt {
    padding-top: 0;
  }

  .mccard-main.s1.s1-s2 .class-mottos .praise-abuse {
    font-family: '\65B9\6B63\827A\9ED1\7B80\4F53';
    -webkit-text-stroke-width: 0.2px;
    font-size: 28px;
    width: 544px;
    position: absolute;
    top: 244px;
    left: 452px;
    display: block;
  }

  .mccard-main.s1.s1-s2 .class-mottos .praise-abuse .name {
    color: #737373;
  }

  .mccard-main.s1.s1-s2 .class-mottos .praise-abuse .behavior {
    color: #ba8e2f;
    text-align: center;
    display: inline-block;
    min-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 420px;
    vertical-align: middle;
  }

  .mccard-main.s1.s1-s2 .class-mottos .praise-abuse .score {
    color: #66cd12;
  }

  .mccard-main.s1.s1-s2 .class-mottos .praise-abuse .wrong {
    color: #ff5e5e;
  }

  .mccard-main.s1.s1-s2 .class-mottos .praise-abuse table {
    width: 100%;
  }

  .mccard-main.s1.s1-s2 .class-mottos .praise-abuse td {
    height: 46px;
  }
</style>
